<template>
  <div class="app-container">
    <div v-if="hasPermission" v-loading="pageLoading">
      <el-card v-if="isAdmin" shadow="never" class="mb-10" body-style="padding-bottom: 2px">
        <SearchBar
          :search-items="searchItems"
          :initial-values="initialValues"
          @search="handleSearch"
          @reset="handleReset"
        />
      </el-card>
      <el-card shadow="never" class="mb-10">
        <el-descriptions class="mb-20" :column="4" direction="vertical" border>
          <template #title>
            <div class="flex items-center">
              <div class="w-10 h-10 bg-accent-color" />
              <div class="font-bold text-333333 text-16 ml-10">客户数据</div>
              <div class="font-medium text-999999 text-12 ml-10">
                数据统计截止至{{ dataStatsTime }}
              </div>
            </div>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="flex items-center">
                <div class="mr-10">客户总数</div>
                <CustomPopover
                  content="统计全平台的“我的客户”和“捞取的客户”之和"
                  icon="infoFilled"
                  icon-color="#666"
                  icon-size="18px"
                  placement="right"
                />
              </div>
            </template>
            <div class="text-333333 text-20 font-bold">
              {{ formatNumberWithCommas(crmStatisticsResult.clientSum) }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="flex items-center">
                <div class="mr-10">已合作</div>
                <CustomPopover
                  content="统计全平台的“我的客户”和“捞取的客户”列表中“已合作”状态之和"
                  icon="infoFilled"
                  icon-color="#666"
                  icon-size="18px"
                  placement="right"
                />
              </div>
            </template>
            <div class="text-333333 text-20 font-bold">
              {{ formatNumberWithCommas(crmStatisticsResult.successNum) }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item v-if="isAdmin">
            <template #label>
              <div class="flex items-center">
                <div class="mr-10">无意向</div>
                <CustomPopover
                  content="统计全平台的“我的客户”和“捞取的客户”列表中“无意向”状态之和"
                  icon="infoFilled"
                  icon-color="#666"
                  icon-size="18px"
                  placement="right"
                />
              </div>
            </template>
            <div class="text-333333 text-20 font-bold">
              {{ formatNumberWithCommas(crmStatisticsResult.innocentNum) }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="flex items-center">
                <div class="mr-10">未合作</div>
                <CustomPopover
                  content="统计全平台的“我的客户”和“捞取的客户”列表中“未合作”状态之和"
                  icon="infoFilled"
                  icon-color="#666"
                  icon-size="18px"
                  placement="right"
                />
              </div>
            </template>
            <div class="text-333333 text-20 font-bold">
              {{ formatNumberWithCommas(crmStatisticsResult.unCooperateNum) }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="flex items-center">
                <div class="mr-10">客户公海总数</div>
                <CustomPopover
                  content="统计全平台的“客户公海池”的总数量"
                  icon="infoFilled"
                  icon-color="#666"
                  icon-size="18px"
                  placement="right"
                />
              </div>
            </template>
            <div class="text-333333 text-20 font-bold">
              {{ formatNumberWithCommas(crmStatisticsResult.publicNum) }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="flex items-center">
                <div class="mr-10">精准客户总数</div>
                <CustomPopover
                  content="统计全平台的“精准客户”的总数量"
                  icon="infoFilled"
                  icon-color="#666"
                  icon-size="18px"
                  placement="right"
                />
              </div>
            </template>
            <div class="text-333333 text-20 font-bold">
              {{ formatNumberWithCommas(crmStatisticsResult.exactPublicNum) }}
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card v-if="isAdmin" shadow="never" class="mb-10">
        <el-descriptions class="mb-20" direction="vertical" border>
          <template #title>
            <div class="flex items-center">
              <div class="w-10 h-10 bg-accent-color" />
              <div class="font-bold text-333333 text-16 ml-10">打卡数据</div>
            </div>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="flex items-center">
                <div class="mr-10">打卡人数/员工总数</div>
              </div>
            </template>
            <div class="flex">
              <div class="text-333333 text-20 font-bold">
                {{ formatNumberWithCommas(crmStatisticsResult.signCardNum) }}
              </div>
              /
              <div class="text-333333 text-20 font-bold">
                {{ formatNumberWithCommas(crmStatisticsResult.employeeTotalNum) }}
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="flex items-center">
                <div class="mr-10">打卡人数 / 员工数</div>
              </div>
            </template>
            <div class="flex">
              <div class="text-333333 text-20 font-bold">
                {{ formatNumberWithCommas(companySignCardResult.signCardNum) }}
              </div>
              /
              <div class="text-333333 text-20 font-bold">
                {{ formatNumberWithCommas(companySignCardResult.employeeTotalNum) }}
              </div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
    <div v-else>
      <transition appear enter-active-class="animate__animated animate__zoomIn">
        <div class="animate__delay-1s">
          <h1>欢迎您：{{ userInfo.name }}</h1>
          <div class="text-999999">您所在的位置：首页</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store";
import CustomPopover from "@/views/templatePage/CustomPopover/index.vue";
import SearchBar from "@/views/templatePage/SearchBar/index.vue";
import DashboardAPI, {
  CompanySignCardResult,
  CrmStatisticsFormData,
  CrmStatisticsResult,
} from "@/api/dashboard";
import { UserInfo } from "@/api/auth";
import { formatDate, formatNumberWithCommas } from "@/utils";
import { SearchItem } from "@/views/templatePage/SearchBar/index.vue";
/** 用户状态管理器 */
const userStore = useUserStore();
/** 获取用户信息 */
let userInfo: UserInfo = userStore.userInfo;
/** 是否有查看权限 */
const hasPermission = computed(() => {
  return userInfo.permissionsArray.includes("crm_statistics_see");
});
/** 是否为管理员 */
const isAdmin = computed(() => {
  return userInfo.roleType === 10 && userInfo.specialRoleType === 1;
});
/** 数据统计时间为当前时间的前一天  */
const dataStatsTime: string = formatDate(new Date().getTime() - 24 * 60 * 60 * 1000, "YYYY-MM-DD");
/** 公司列表数据 */
const companiesList = ref<OptionType[]>([{ label: "全部", value: 0 }]);
/** 获取公司列表 */
const getCompanies = () => {
  if (!hasPermission.value) return;
  DashboardAPI.getCompanies().then((data) => {
    data.forEach((item) => {
      companiesList.value.push({
        label: item.companyName,
        value: item.id,
      });
    });
  });
};
/** 搜索项配置 */
const searchItems: SearchItem[] = [
  {
    prop: "companyId",
    label: "分公司",
    type: "select",
    clearable: false,
    options: companiesList.value,
  },
];
/** 初始值 */
const initialValues = ref<Record<string, any>>({
  companyId: 0,
});
/** 处理搜索 */
const handleSearch = (form: Record<string, any>) => {
  initialValues.value = form;
  getCrmStatistics();
  getCompanySignCard();
};
/** 处理重置 */
const handleReset = () => {
  initialValues.value.companyId = 0;
  getCrmStatistics();
  getCompanySignCard();
};
/** 页面加载状态 */
const pageLoading = ref<boolean>(false);
/** 分公司返回参数 */
const crmStatisticsResult = ref<CrmStatisticsResult>({
  clientSum: 0,
  employeeTotalNum: 0,
  exactPublicNum: 0,
  innocentNum: 0,
  publicNum: 0,
  signCardNum: 0,
  successNum: 0,
  unCooperateNum: 0,
});
/** 获取分公司统计数据 */
const getCrmStatistics = () => {
  if (!hasPermission.value) return;
  if (pageLoading.value) return;
  pageLoading.value = true;
  DashboardAPI.getCrmStatistics(initialValues.value as CrmStatisticsFormData)
    .then((data) => {
      pageLoading.value = false;
      crmStatisticsResult.value = data;
    })
    .catch(() => {
      pageLoading.value = false;
    });
};
/** 分公司打卡返回参数 */
const companySignCardResult = ref<CompanySignCardResult>({
  employeeTotalNum: 0,
  signCardNum: 0,
});
/** 获取分公司打卡数据 */
const getCompanySignCard = () => {
  DashboardAPI.getCompanySignCard(initialValues.value as CrmStatisticsFormData).then((data) => {
    companySignCardResult.value = data;
  });
};
onMounted(() => {
  getCompanies();
  getCrmStatistics();
  getCompanySignCard();
});
</script>

<style scoped lang="scss"></style>
